웹 기술로 만드는 협업형 여행 계획 플랫폼 TripTune

사이트: https://triptune.site

깃허브: https://github.com/TripTune-Project/TripTune-Frontend

한 줄 소개:

함께 여행계획을 작성하는 웹 프로젝트

기술 스택:

TypeScript, Next, React, Material-UI, Tanstack-query, Zustand , WebSocket, Stomp.js

주요업무:

• 피그마로 간단한 프로토타입 목업 작업 진행
• 프론트엔드 전체 구성 및 작성
  • 홈 화면
  • 회원 정보
  • 여행지 탐색
  • 일정 만들기
  • 마이페이지

업무 기간:

• **2024.06 ~ 2025.01 (약 6개월) / MVP 달성 후 추가 개발 중 **

개발 인원:

• 기획 및 프론트엔드 1명
• 디자인 및 백엔드 1명

프로젝트 개요

피그마나 혹은 함께 일정을 만들어가는 어플리케이션을 창작하고 싶은 마음으로 시작을 하게 되었습니다.

주요 기술 성과

1. 액세스 토큰 기반 API 요청 관리 및 리프레시 로직 구현

• 성과
  • 커스텀 fetch 함수를 활용하여 인증이 필요한 API 요청을 효율적으로 관리.
  • 토큰 만료 시 refresh token을 통해 자동 갱신하며, 실패 시 로그인 리다이렉션 처리로 인증 상태 관리 자동화.
  • 여행 일정 작성 중 토큰 만료로 데이터가 초기화되지 않도록 작업 연속성을 보장.
• 선택 이유
  • 인증 실패(401)와 같은 공통 문제를 해결하며 사용자 경험(UX)을 유지하기 위해 도입.
  • React-Query와 Fetch를 각각 역할에 맞게 구분:
    • React-Query는 데이터 캐싱이 중요한 기능(예: 무한스크롤)에서 활용.
    • Fetch는 인증 요청과 같이 실시간 데이터 처리가 중요한 곳에 사용.
  • 중복 로직 제거로 API 요청의 가독성과 유지보수성을 개선.
• 기대 효과
  • 사용자 재로그인 빈도 감소로 UX 향상.
  • 인증 및 에러 처리 로직 표준화로 코드의 일관성과 확장성 확보.
  • 서버 리소스 활용 최적화 및 시스템 안정성 강화.

2. 검색 기능 최적화: 자동 완성과 디바운스 구현

• 성과
  • 입력 중 디바운스 로직을 커스텀 훅으로 구현해 과도한 서버 요청 방지.
  • 실시간 검색 자동 완성을 통해 사용자 편의성을 대폭 증대.
• 선택 이유
  • 실시간 데이터 제공과 입력 속도 간 균형을 맞추면서 서버 부하를 최소화하기 위해 도입.
• 기대 효과
  • 서버 요청 감소로 리소스 활용 효율성 증가.
  • 사용자 경험(UX) 개선 및 검색 결과 신뢰도 강화.

3. API 요청 검증 및 에러 처리 미들웨어 구현

• 성과
  • Next.js 미들웨어를 활용하여 API 요청 경로를 사전 검증.
  • 잘못된 요청 시 404 페이지로 리다이렉트 처리하여 사용자 피드백을 개선.
• 선택 이유
  • 불필요한 API 요청과 리소스 낭비를 방지하기 위해 도입.
  • 사용자 경험 강화 및 시스템 안정성을 위해 설계.
• 기대 효과
  • API 서버 부하 감소로 성능 향상.
  • 명확한 에러 처리를 통한 사용자 경험(UX) 개선.

4. Zustand 및 React-Query를 활용한 효율적인 상태 관리

• 성과
  • Zustand와 React-Query를 결합해 여행지 탐색 데이터를 전역 상태로 관리.
  • 무한스크롤 기능에서 React-Query를 활용해 데이터 캐싱 및 API 호출 최적화(staleTime과 cacheTime 활용).
  • 특정 페이지 데이터만 유지하는 대신 여러 페이지 간 데이터를 효율적으로 공유 및 캐싱.
• 선택 이유
  • React-Query는 데이터 캐싱과 상태 관리에 적합하여 서버 요청을 줄이고 UX를 개선하기 위해 도입.
  • Fetch와는 독립적으로 인증 요청과 같은 실시간 데이터 처리에 사용하여 역할을 명확히 구분.
  • 간단하고 직관적인 상태 관리 도구 Zustand를 통해 상태 로직을 간소화.
• 기대 효과
  • 중복 요청 감소로 서버 리소스 절약.
  • 상태 관리 간소화 및 유지보수성 향상.
  • 사용자 경험 개선으로 전반적인 서비스 품질 향상.

5. 실시간 채팅 기능 구현

• 성과
  • STOMP 기반 WebSocket을 활용해 실시간 메시징 기능과 과거 메시지 불러오기(무한 스크롤) 구현.
  • 안정적인 연결을 위한 재연결 및 심장박동 로직 설정.
• 선택 이유
  • 실시간 데이터 통신이 필요한 기능에서 WebSocket과 STOMP.js의 간결성과 효율성을 활용.
• 기대 효과
  • 사용자 간 실시간 소통 지원으로 UX 향상.
  • 유지보수 및 확장 용이한 구조 제공.
  • 안정적인 메시지 전송 및 로딩 경험 제공.

6. Drag and Drop(DnD) 및 BFF 최적화 구현

• 성과
  • React DnD와 HTML5 Backend를 활용해 여행 일정 관리 시스템의 Drag and Drop(DnD) 기능 구현.
  • BFF(Backend-for-Frontend) 패턴을 적용하여 외부 API에서 가져온 여행 데이터와 클라이언트의 상태(travelRoute)를 병합.
  • 사용자들이 일정 순서를 직관적으로 변경하고 불필요한 일정은 삭제 드롭 존(Delete Zone)을 통해 간편히 제거할 수 있도록 UI/UX 개선.
• 선택 이유
  • 사용자가 여행 일정을 추가, 정렬, 삭제할 때 시각적이고 직관적인 조작 방식을 제공하여 사용자 경험(UX)을 향상시키기 위해 DnD 도입.
  • BFF 패턴 도입 이유:
    • 클라이언트가 필요로 하는 데이터만 적시에 가공 및 제공하여 프론트엔드의 불필요한 데이터 처리 부담을 줄임.
    • 데이터 병합 및 순서(order) 추가 등 사용자 맞춤형 데이터 구조를 제공하여 UI 로직과 데이터 로직을 분리.
  • React DnD와 HTML5 Backend는 React 생태계와 높은 호환성을 가지고 있으며, 복잡한 상태 관리를 간소화하면서 컴포넌트 기반 설계에 최적화된 기술로 판단.
• 기대 효과
  • 사용자 만족도 증가: 실시간 시각적 피드백 및 최적화된 데이터 구조 제공으로 더 나은 사용자 경험을 제공.
  • 유지보수 효율성 향상: 컴포넌트 기반 설계와 BFF 패턴 적용으로 UI와 데이터 처리 로직의 분리 및 확장 가능성을 확보.
  • 업무 생산성 향상: 클라이언트에서의 데이터 가공 작업을 BFF에서 처리함으로써 클라이언트의 복잡도를 감소시키고 작업 시간을 단축.

이미지